<template>
  <div class="song-item" @click="handlePlayMusic(props.musicDetail.id)">
    <span>{{ props.order }}</span>
    <div class="song">
      <div class="song-info">
        <div class="song-info-name">{{ props.musicDetail.name }}</div>
        <div class="song-info-author">
          <!-- 接口获取内容item字段不同，暂且扩充字段共用一个类型 -->
          {{ props.isSearch ? props.musicDetail.artists[0].name : props.musicDetail.ar[0].name }} -
          {{ props.isSearch ? props.musicDetail.album.name : props.musicDetail.al.name }}
        </div>
      </div>
      <van-icon name="tv-o" :style="{ color: props.lightColor }"></van-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ISearchSongItem } from "@/types/music/searchSongType";

const props = defineProps<{
  musicDetail: ISearchSongItem;
  order: number;
  color: string;
  lightColor: string;
  isSearch: boolean;
}>();

const emit = defineEmits<{
  (e: "playMuisc", id: number): void;
}>();

const handlePlayMusic = (id: number) => {
  emit("playMuisc", id);
};
</script>

<style scoped lang="scss">
.song-item {
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 0;
  box-sizing: border-box;
  color: v-bind("props.color");
  span {
    width: 40px;
    text-align: center;
    font-size: 25px;
  }
  .song {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-info {
      &-name {
        font-size: 20px;
        margin-bottom: 5px;
      }
      &-author {
        color: v-bind("props.lightColor");
        font-size: 14px;
      }
    }
  }
}
</style>
